<template>
  <div :id="id" style="width: 100%;height: 300px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    id: {
      type: String,
      default: "bar",
    },
    initData: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    this.initBar();
  },
  watch: {
    initData: {
      handler() {
        this.initBar();
      },
    },
  },
  methods: {
    initBar() {
      const _this = this;
      const chartDom = document.getElementById(this.id);
      this.myChart = echarts.init(chartDom);
      this.myChart.showLoading();

      const keys = Object.keys(this.initData || {});
      const dataList = Object.values(this.initData || {});

      let option = {
        title: {
          // text: "组内成员分值情况",
          left: "center",
          top: "center",
          textStyle: {
            color: "#e4e4e4",
            fontSize: "50",
          },
          zlevel: -1,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ['#d01951'],
        grid: {
          top: 0,
          left: "1%",
          right: "1%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: keys,
            axisTick: {
              alignWithLabel: true,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show: false,
          },
        ],
        dataZoom : [
          {
            type: 'slider',
            show: true,
            bottom: 0,
            start: 0,
            end: 30,
            xAxisIndex: [0],
          },
        ],
        series: [
          {
            name: "分值",
            type: "bar",
            barWidth: "15%",
            data: dataList,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
            },
          },
        ],
      };

      option && this.myChart.setOption(option);
      this.myChart.hideLoading();
      window.addEventListener("resize", function() {
        _this.myChart.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.clear();
    }
  },
};
</script>

<style lang="less" scoped></style>
